<template>
  <div class="iphone">
    <van-nav-bar
      title="手机号登录"
      left-text="返回"
      :right-text="righttext"
      left-arrow
      @click-left="add(0)"
      @click-right="add(1)"
    >
    </van-nav-bar>
    <van-form @submit="onSubmit">
      <van-field
        v-model="froms.username"
        name="phone"
        label="手机号"
        placeholder="手机号"
        :rules="[
          {
            validator: validator,
            message: '请正确输入手机号',
            trigger: 'onChange',
          },
        ]"
      />
      <van-field
        v-if="!show"
        v-model="froms.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <div v-else>
        <van-field
          v-model="froms.phone"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
          name="captcha"
          type="number"
          maxlength="4"
          :rules="[{ validator: validators, message: '请输入验证码' }]"
        >
          <template #button>
            <van-button size="small" @click="send" :disabled="shows">{{
              sendtext
            }}</van-button>
          </template>
        </van-field>
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  login,
  hsendverification,
  Verificationcode,
  status,
} from "../api/login/login";
import { account } from "../api/user/user";
export default {
  data() {
    return {
      froms: {
        username: "",
        password: "",
        phone: "",
      },
      show: false,
      righttext: "验证码登录",
      sendtext: "发送验证码",
      second: 3,
      time: "",
      shows: true,
    };
  },
  mounted() {},
  methods: {
    validator(val) {
      let blooe =
        /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(
          val
        );
      if (blooe) {
        this.shows = !blooe;
      } else {
        this.shows = true;
      }

      return /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(
        val
      );
    },
    add(num) {
      if (num == 0) {
        this.$router.push("/login");
      } else if (this.show == true) {
        this.show = false;
        this.righttext = "验证码登录";
      } else {
        this.show = true;
        this.righttext = "密码登录";
      }
    },
    onSubmit(a) {
      this.$nextTick(function () {
        const toast = Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "验证中...",
        });
        let second = 3;
        const timer = setInterval(() => {
          second--;
          if (second) {
            toast.message = `验证中...`;
          } else {
            clearInterval(timer);
            // 手动清除 Toast
            Toast.clear();
            if (a) {
              login(a).then((v) => {
                Toast.clear();
                if (v.code !== 200) {
                  Toast.fail(v.message);
                } else {
                  window[this.$store.state._storageUrl].setItem("user", JSON.stringify(v));
                  this.$router.push("/home/home2");
                }
              });
            }
          }
        }, 1000);
      });
    },
    validators(v) {
      return /^\d{4}$/.test(v);
    },
    send() {
      clearInterval(this.time);
      this.shows = true;
      hsendverification({ phone: this.froms.username }).then((v) => {
        if (v.code == 400) {
          Toast.fail(v.message);
        }
      });
      let c = 60;
      console.log(this.froms);
      this.time = setInterval(() => {
        if (c == 0) {
          clearInterval(this.time);
          this.sendtext = "重新发送验证码";
          this.shows = false;
        } else {
          this.sendtext = c + "s";
          c--;
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.iphone {
  height: 100%;
}
</style>